<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单详情</title>
		<!-- import Vue before Element -->
		<script src="../static/js/vue.js"></script>
		<!-- import JavaScript -->
		<script src="../static/js/element.js"></script>
		<script src="../static/js/axios.js"></script>
		<link rel="stylesheet" href="../static/elementui/theme-chalk/index.css">
	</head>
	<style type="text/css">
		/* 		div{
			border: 1px black solid;
		} */
		.head {
			width: 90%;
			margin: auto;
			height: 80px;
			line-height: 80px;
		}
		.body {
			/* height: 400px; */
			width: 90%;
			margin: auto;
			border-radius: 4px;
			box-shadow: 0 6px 10px rgba(0, 0, 0, .24), 0 8px 8px rgba(0, 0, 0, .12)
		}
		.title {
			height: 50px;
			line-height: 50px;
			border-bottom: #000000 solid 1px;
			padding-left: 20px;
			box-sizing: border-box;
		}
		.linet{
			text-decoration: line-through;
		}
	</style>
	<body>
		<div id="element">
			<div class="head">
				<span style="font-family: PingFang SC;font-size: 20px;">
					订单管理
				</span>
				<i class="el-icon-money"></i>
				<span style="font-family: PingFang SC;font-size: 18px;">
					- 订单详情
				</span>
			</div>
			<div class="body">
				<div class="title">
					<span style="font-family: PingFang SC;font-size:18px;">
						<div v-if="o.status==0">
							当前订单状态：已完成
						</div>
						<div v-if="o.status==1">
							当前订单状态：已取消
						</div>
						<div v-if="o.status==2">
							当前订单状态：<font style="color: red;font-size: 16px;">
							待付款&nbsp; <span v-text="deadline"></span>
							</font>
						</div>
						<div v-if="o.status==3">
							当前订单状态：待发货
						</div>
						<div v-if="o.status==4">
							当前订单状态：待退货
						</div>
						<div v-if="o.status==5">
							当前订单状态：退货中
						</div>
						<div v-if="o.status==6">
							当前订单状态：已退货
						</div>
						<div v-if="o.status==7">
							当前订单状态：已付款
						</div>
					</span>
					<div style="float: right;font-size: 16px;">
						<span v-if="o.status==2"><el-button type="primary" @click="modify">修改收货信息</el-button></span>
						<spqn v-else></spqn>
						<span v-if="o.status==2 || o.status==3"><el-button type="primary" @click="changeMoney">修改商品价格</el-button></span>
						<el-button type="primary" >联系客户</el-button>
					</div>
					<div style="clear: both;">
					</div>
				</div>
				<br>
				<div class="base">
					<font face="黑体" size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本信息</font>
					<template>
					    <el-table
					      :data="baseData"
						  border
						  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
					      style="width: 94%;margin: auto;">
					      <el-table-column
							align="center"
					        prop="orderNo"
					        label="订单编号">
					      </el-table-column>
					      <el-table-column
						  align="center"
					        prop="createTime"
					        label="下单时间"
						  :formatter="formatDate">
					      </el-table-column>
						  <el-table-column
						  align="center"
						    prop="telephone"
						    label="手机">
						  </el-table-column>
						  <el-table-column
						  align="center"
						    label="支付方式">
							  <template scope="scope">
								  <p v-if="scope.row.status==1 || scope.row.status==2">/</p>
								  <p v-else="scope.row.status==0 || scope.row.status==3 || scope.row.status==7">支付宝</p>
							  </template>
						  </el-table-column>
						  <el-table-column
						  align="center"
						    prop="status"
						    label="支付状态">
							  <template scope="scope">
								  <p v-if="scope.row.status==1 || scope.row.status==2">未支付</p>
								  <p v-else="scope.row.status==0 || scope.row.status==3 || scope.row.status==7">已支付</p>
							  </template>
						  </el-table-column>
						  <el-table-column
						  align="center"
						    label="物流单号"
						  prop="transportNo">
						  </el-table-column>
						  <el-table-column
						  align="center"
						    label="自动确认收货时间">
							15天
						  </el-table-column>
					    </el-table>
					</template>
				</div>
				<hr width="94%" color="#BBBBBB">
				<div class="transport">
					<font face="黑体" size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址信息</font>
					<template>
					    <el-table
					      :data="transData"
						  border
						  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
					      style="width: 94%;margin: auto;">
					      <el-table-column
							align="center"
					        prop="accept"
					        label="收货人">
					      </el-table-column>
					      <el-table-column
						  align="center"
					        prop="telephone"
					        label="手机号">
					      </el-table-column>
						  <el-table-column
						  align="center"
						    prop="address"
						    label="地址">
						  </el-table-column>
						  <el-table-column
						  align="center"
						  prop="postCode"
						    label="邮编">
						  </el-table-column>
						  <el-table-column
						  align="center"
						    prop="status"
						    label="进度">
							<template scope="scope">
								<p v-if="scope.row.status==0"><el-button type="text" @click="open">去发货</el-button></p>
								<p v-if="scope.row.status==1">已发货</p> 
								<p v-if="scope.row.status==2">运送中</p>
								<p v-if="scope.row.status==3">已签收</p>
								<p v-if="scope.row.status==4">未开始</p>
							</template>
						  </el-table-column>
					    </el-table>
					</template>
				</div>
				<hr width="94%" color="#BBBBBB">
				<div class="goods">
					<font face="黑体" size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品信息</font>
					<template>
					    <el-table
					      :data="goodsData"
						  border
						  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
					      style="width: 94%;margin: auto;">
					      <el-table-column
							align="center"
					        prop="goodsNo"
					        label="商品编号">
					      </el-table-column>
					      <el-table-column
						  align="center"
					        prop="goodsName"
					        label="商品名称">
					      </el-table-column>
						  <el-table-column
						  align="center"
						    prop="nums"
						    label="数量">
						  </el-table-column>
						  <el-table-column
						  align="center"
							prop="price"
						    label="单价">
						  </el-table-column>
						  <el-table-column
						  align="center"
						    prop="postage"
						    label="运费">
						  </el-table-column>
							<el-table-column
									align="center"
									prop="oldPrice"
									label="原价"
									class-name="linet"
									>
							</el-table-column>
						  <el-table-column
						  align="center"
						    prop="price"
						    label="优惠价">
						  </el-table-column>
						  <el-table-column
						  align="center"
						  prop="sum"
						    label="总计">
						  </el-table-column>
						  <el-table-column
						  align="center"
						    prop="expressType"
						    label="配送">
							  <template scope="scope">
								  <p v-if="scope.row.expressType==0">无需配送</p>
								  <p v-if="scope.row.expressType==1">顺丰快递</p>
							  </template>
						  </el-table-column>
						  <el-table-column
						  align="center"
						  prop="uesful"
						    label="有效期">
						  </el-table-column>
					    </el-table>
					</template>
					<div style="float: right;margin-right: 100px;font-size: 25px;color:red;">合计：<sapn v-text="sum"></sapn></div>
				</div>
				<hr width="94%" color="#BBBBBB">
				<div class="refund">
					<font face="黑体" size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;退款信息</font>
					<div>
						<template>
							<el-table
									:data="refundData"
									border
									:header-cell-style="{background:'#eef1f6',color:'#606266'}"
									style="width: 94%;margin: auto;">
								<el-table-column
										align="center"
										prop="createTime"
										label="退款时间"
										:formatter="formatDate">
								</el-table-column>
								<el-table-column
										align="center"
										prop="reason"
										label="退款原因">
								</el-table-column>
								<el-table-column
										align="center"
										prop="status"
										label="进度">
								</el-table-column>
							</el-table>
						</template>
					</div>
				</div>
				<hr width="94%" color="#BBBBBB">
				<div class="opt">
					<font face="黑体" size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作信息</font>
					<div v-if="optData != null && optData.length != 0">
						<template>
						    <el-table
						      :data="optData"
							  border
							  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
						      style="width: 94%;margin: auto;">
							  <el-table-column
							  	align="center"
							    prop="adminBean.adminName"
							    label="操作者">
							  </el-table-column>
						      <el-table-column
								align="center"
						        prop="optTime"
						        label="操作时间"
							  :formatter="formatDate">
						      </el-table-column>
							  <el-table-column
							  	align="center"
							    prop="orderStatus"
							    label="订单状态">
								  <template scope="scope">
									  <p v-if="scope.row.orderStatus==0">已完成</p>
									  <p v-if="scope.row.orderStatus==1">已取消</p>
									  <p v-if="scope.row.orderStatus==2">待付款</p>
									  <p v-if="scope.row.orderStatus==3">待发货</p>
									  <p v-if="scope.row.orderStatus==4">待退款</p>
									  <p v-if="scope.row.orderStatus==5">退货中</p>
									  <p v-if="scope.row.orderStatus==6">已退货</p>
									  <p v-if="scope.row.orderStatus==7">已付款</p>
								  </template>
							  </el-table-column>
						      <el-table-column
							  align="center"
						        prop="orderPay"
						        label="付款状态">
								  <template scope="scope">
									  <p v-if="scope.row.orderPay==0">已付款</p>
									  <p v-if="scope.row.orderPay==1">未付款</p>
								  </template>
						      </el-table-column>
							  <el-table-column
							  align="center"
							    prop="orderSend"
							    label="发货状态">
								  <template scope="scope">
									  <p v-if="scope.row.orderSend==0">已发货</p>
									  <p v-if="scope.row.orderSend==1">未发货</p>
								  </template>
							  </el-table-column>
							  <el-table-column
							  align="center"
							    prop="type"
							    label="操作">
								  <template scope="scope">
									  <p v-if="scope.row.type==1">发货</p>
									  <p v-if="scope.row.type==2">改价</p>
								  </template>
							  </el-table-column>
							</el-table>
						</template>
					</div>
					<div v-else style="text-align: center; height: 50px; line-height: 50px;color:#82848A">
						暂未操作信息
					</div>
				</div>
			</div>
			<el-dialog title="修改收货信息" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="收货人" :label-width="formLabelWidth">
						<el-input v-model="form.accept" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机" :label-width="formLabelWidth">
						<el-input v-model="form.telephone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="地址" :label-width="formLabelWidth">
						<el-cascader
								:options="options"
								:props="props"
								v-model="form.pca"
								collapse-tags
								clearable></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" :label-width="formLabelWidth">
						<el-input v-model="form.address" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="changeAccept">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script type="text/javascript">
		parent.layui.admin.events.closeOtherTabs()
		let order = JSON.parse(window.sessionStorage.getItem("order"))
		let allGoods = null;
		let nums = null;
		let sum = order.money
		let element = new Vue({
			el:"#element",
			data:{
				deadline:'15:00',
				sum:sum,
				o:order,
				baseData:[],
				transData:[],
				goodsData:[],
				refundData:[],
				optData:[],
				dialogFormVisible: false,
				formLabelWidth: '120px',
				form: {
					accept: '',
					telephone: '',
					address: '',
					pca:[]
				},
				props: { multiple: false },
				options: [{
					value: 1,
					label: '北京',
					children: [{
						value: 2,
						label: '北京',
						children: [
							{ value: 3, label: '朝阳区' },
							{ value: 4, label: '海淀区' },
							{ value: 5, label: '西城区' }
						]
					}]
				}, {
					value: 17,
					label: '四川',
					children: [{
						value: 18,
						label: '成都',
						children: [
							{ value: 19, label: '武侯区' },
							{ value: 20, label: '高新区' }
						]
					}, {
						value: 21,
						label: '南充',
						children: [
							{ value: 22, label: '顺庆区' },
							{ value: 23, label: '嘉陵区' }
						]
					}]
				}]
			},
			methods:{
				//时间格式化
				formatDate:function(row, column) {
					// 获取单元格数据
					let data = row[column.property]
					if (data == null) {
						return ''
					}
					let dt = new Date(data)
					return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
				},
				open:function() {
				        this.$prompt('请输入快递单号', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				        }).then(({ value }) => {
							axios.get("send?id="+order.id+"&no="+value)
							parent.layui.index.openTabsPage("order/order", "订单查询")
				          this.$message({
				            type: 'success',
				            message: '发货成功 '
				          });
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '取消'
				          });       
				        });
				      },
				changeMoney:function(){
					this.$prompt('修改后价格', '修改', {
					          confirmButtonText: '确定',
					          cancelButtonText: '取消',
					        }).then(({ value }) => {
								axios.get("changeMoney?id="+order.id+"&money="+value)
								element.$data.sum = value
					          this.$message({
					            type: 'success',
					            message: '修改成功: ' + value
					          });
					        }).catch(() => {
					          this.$message({
					            type: 'info',
					            message: '取消输入'
					          });       
					        });
				},
				modify:function (){
					this.dialogFormVisible = true
					this.form.accept = order.accept
					this.form.telephone = order.telephone
				},
				changeAccept:function (){
					let newaddress = ''
					switch (this.form.pca[2]) {
						case 3: newaddress='北京/北京/朝阳区/'
							break;
						case 4: newaddress='北京/北京/海淀区/'
							break;
						case 5: newaddress='北京/北京/西城区/'
							break;
						case 19: newaddress='四川/成都/武侯区/'
							break;
						case 20: newaddress='四川/成都/高新区/'
							break;
						case 22: newaddress='四川/南充/顺庆区/'
							break;
						case 23: newaddress='四川/南充/嘉陵区/'
							break;
						default: newaddress=order.address
					}
					newaddress += this.form.address
					let neworder = {
						address:newaddress,
						telephone:this.form.telephone,
						accept:this.form.accept,
						id:order.id
					}
					this.dialogFormVisible = false
					axios.post("updateOrder",neworder)
					.then(function (){
						parent.layui.index.openTabsPage("order/order", "订单查询")
					})
				}
			}
		})
		let base = {
			orderNo:order.orderNo,
			telephone:order.telephone,
			createTime:order.createTime,
			status:order.status,
			transportNo:order.transportBean.transNo
		}
		let transport = {
			accept:order.accept,
			telephone:order.telephone,
			address:order.address,
			status:order.transportBean.status,
			postCode:order.transportBean.postCode
		}
		element.$data.baseData.push(base)
		element.$data.transData.push(transport)
		axios.get("findGoods?id="+order.id)
				.then(function (res) {
					allGoods = JSON.parse(res.data.goods)
					nums = JSON.parse(res.data.nums)
					for (var i = 0 ;i < allGoods.length;i++){
						let goods = {
							goodsNo:allGoods[i].goodsNo,
							goodsName:allGoods[i].goodsName,
							nums:nums[i],
							price:allGoods[i].salesPrice,
							oldPrice:allGoods[i].marketPrice,
							postage:allGoods[i].postage,
							sum:allGoods[i].salesPrice*nums[i],
							expressType:allGoods[i].expressType,
							uesful:"365"
						}
						element.$data.goodsData.push(goods)
					}
				})
				.catch(function (error) {s
					console.log(error)
				});
		axios.get("findRefund?id="+order.id)
				.then(function (res){
						element.$data.refundData.push(res.data)
				})
				.catch(function (error){
					console.log(error)
				})
		axios.get("findOpt?id="+order.id)
				.then(function (res){
					console.log(res.data)
					element.$data.optData = res.data
				})
				.catch(function (error){
					console.log(error)
				})
		let dead = 899
		let inteval = setInterval(function (){
			let s = dead % 60
			let m = (dead-s) / 60
			element.$data.deadline = ''+m+':'+s
			dead--
			if(dead == 0){
				clearInterval(inteval)
			}
		},1000)
	</script>
</html>
